<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import JButtons from "@/components/j-buttons/index.vue";
import { title_nvas, tabKeys } from "./scripts/tabList";
import i18n from "@/locals";
const prop = defineProps({
    title_nvas: {
        type: Array,
        default: title_nvas
    },
    title: {
        type: String,
        default: "标题"
    },
    tabBtn: {
        type: Boolean,
        default: true
    }
});
const days = ref(prop.title_nvas);
const curDay = ref<any>(days.value[0]);
onMounted(() => {
    tabKeys.tab_key.value = title_nvas[0];
    tabKeys.tab2_key.value = title_nvas[0];
    tabKeys.tab3_key.value = title_nvas[1];
    tabKeys.tab4_key.value = title_nvas[0];
});
watch(
    () => curDay.value,
    (val, old) => {
        if (prop.title === i18n.global.t("message.DateAlter.b")) {
            tabKeys.tab_key.value = curDay.value;
        }
        if (prop.title === i18n.global.t("message.DateAlter.c")) {
            tabKeys.tab2_key.value = curDay.value;
        }
        if (prop.title === i18n.global.t("message.DateAlter.d")) {
            tabKeys.tab3_key.value = curDay.value;
        }
        if (prop.title === i18n.global.t("message.DateAlter.e")) {
            tabKeys.tab4_key.value = curDay.value;
        }
    }
);
</script>

<template>
    <div class="tabList">
        <div class="t-header d-flex justify-space-between px-5">
            <span style="font-weight: bolder">{{ prop.title }}</span>
            <JButtons v-if="tabBtn" :list="days" v-model="curDay">{{ prop.title }}</JButtons>
        </div>
        <div class="t-body">
            <slot></slot>
        </div>
    </div>
</template>

<style lang="less" scoped>
.tabList {
    position: relative;
    width: 100%;
    height: 570px;
    background: #1d2125;
    padding: 28px 30px;
    padding-bottom: 0px;
    border-radius: 4px;

    :deep(.nvas) {
        color: var(--color);
        font-size: 12px;
    }
}

:deep(.col0) {
    max-width: 10px;
    // background-color: red;
}

:deep(.col2_label) {
    display: flex;
    justify-content: flex-end;

    // background-color: yellow;
    // span{
    // width: 20px;
    // background-color: red;
    // }
    span:first-child {
        text-align: left;
    }

    span:last-child {
        text-align: right;
        margin-left: 10px;
    }
}

.colr {
    color: #1d2125;
}

:deep(.y-link) {
    cursor: pointer;
    position: relative;

    &:hover {
        &::after {
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            height: 1px;
            background-color: white;
        }
    }
}

:deep(.lose) {
    color: var(--lose) !important;
}

:deep(.win) {
    color: var(--win) !important;
}
</style>
